<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/beneoverlay.css">
        <script type="text/javascript" src="js/qwebchannel.js"></script>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/beneoverlay.js"></script>
        <script type="text/javascript" src="js/widgets/callsign.js"></script>
        <script type="text/javascript" src="js/widgets/network.js"></script>
        <script type="text/javascript" src="js/widgets/speed.js"></script>
        <script type="text/javascript" src="js/widgets/heading.js"></script>
        <script type="text/javascript" src="js/widgets/altitude.js"></script>
        <script type="text/javascript" src="js/widgets/wind.js"></script>
        <script type="text/javascript" src="js/widgets/temperature.js"></script>
        <script type="text/javascript" src="js/widgets/performance.js"></script>
        <script type="text/javascript" src="js/widgets/widgets.js"></script>
        <script type="text/javascript">
         $(function () {
             connect(function (data_refs) {
                 setupWidgets(data_refs);
             });
         });
        </script>
    </head>
    <body>
        <div class="tabs">
            <div id="callsign" class="tabs">
                <svg class="icon" viewBox="0 0 100 100">
                    <path
                        d="m10,50 a 40 45 0 0 1 80,0"
                        stroke-width="5"
                        fill="none"
                        class="primary-stroke"
                    />
                    <g id="earpad">
                        <ellipse cx="12" cy="50" rx="5" ry="15" class="primary-fill" />
                        <ellipse cx="22" cy="52" rx="10" ry="20" class="primary-fill" />
                    </g>
                    <use xlink:href="#earpad" x="0" y="0" transform="translate(100) scale(-1 1)" />
                    <path
                        d="m90,50 a 30 30 0 0 1 -20 40"
                        stroke-width="3"
                        fill="none"
                        class="primary-stroke"
                    />
                    <ellipse class="secondary-fill" cx="70" cy="90" rx="6" ry="10" transform="rotate(65,70,90)" />
                </svg>
                <table>
                    <tr id="callsign-row">
                        <td>
                            <span id="airline_icao" class="secondary-font secondary-color">GLW</span>
                            <span id="flight_number" class="secondary-font primary-color">555</span>
                        </td>
                    </tr>
                    <tr id="airline-row">
                        <td id="airline" class="primary-font primary-color" colspan="2" >Global Wings</td>
                    </tr>
                </table>
            </div>
            <div id="network" class="tabs">
                <svg class="icon" viewBox="0 0 120 100">
                    <line x1="0" x2="120" y1="50" y2="50" stroke-width="5" class="secondary-stroke" />
                    <g id="computer">
                        <line x1="60" x2="60" y1="50" y2="30" stroke-width="5" class="secondary-stroke" />
                        <rect x="42.5" y="3" width="35" height="28" stroke-width="5" fill="none" class="primary-stroke" />
                    </g>
                    <use xlink:href="#computer" x="0" y="0" transform="rotate(180,60,50) translate(35 0)"/>
                    <use xlink:href="#computer" x="0" y="0" transform="rotate(180,60,50) translate(-35 0)"/>
                </svg>
                <table>
                    <tr id="network-row">
                        <td id="network_name" class="primary-font primary-color">VATSIM</td>
                    </tr>
                    <tr id="aircraft-row">
                        <td id="aircraft_icao" class="primary-font primary-color">B738</td>
                    </tr>
                </table>
            </div>
            <div id="speed" class="tabs">
                <svg class="icon" viewBox="0 0 100 100">
                    <defs>
                        <marker id='head' orient="auto"
                                markerWidth='2' markerHeight='2'
                                refX='0.1' refY='1'>
                            <!-- triangle pointing right (+x) -->
                            <path d='M0,0 V2 L1.5,1 Z' class="primary-fill" />
                        </marker>
                    </defs>
                    <path
                        marker-end="url(#head)"
                        d="m21.075,84.472 a 45 45 0 1 1 66.165,-11.972"
                        fill="none"
                        stroke-width="10"
                        class="primary-stroke"
                    />

                    <path id="notch"
                          d="m50,5 l0,15"
                          stroke-width="10"
                          class="primary-stroke"
                    />
                    <use xlink:href="#notch" x="0" y="0" transform="rotate(60,50,50)"/>
                    <use xlink:href="#notch" x="0" y="0" transform="rotate(-60,50,50)"/>
                    <use xlink:href="#notch" x="0" y="0" transform="rotate(-120,50,50)"/>
                    <g id="ias_pointer">
                        <circle cx="50" cy="50" r="8" class="secondary-fill" />
                        <path
                            d="m50,50 l-5,0 l5,-25 l5,25z"
                            class="secondary-fill"
                        />
                    </g>
                </svg>
                <table>
                    <tr id="ias-row">
                        <td class="secondary-font secondary-color">IAS:&nbsp;</td>
                        <td id="ias" class="primary-font primary-color three-digit right">10</td>
                        <td class="primary-font primary-color">kt</td>
                    </tr>
                    <tr id="tas-row">
                        <td class="secondary-font secondary-color">TAS:&nbsp;</td>
                        <td id="tas" class="primary-font primary-color three-digit right">10</td>
                        <td class="primary-font primary-color">kt</td>
                    </tr>
                    <tr id="gs-row">
                        <td class="secondary-font secondary-color">GS:&nbsp;</td>
                        <td id="gs" class="primary-font primary-color three-digit right">15</td>
                        <td class="primary-font primary-color">kt</td>
                    </tr>
                    <tr id="mach-row">
                        <td class="secondary-font secondary-color">MACH:&nbsp;</td>
                        <td id="mach" class="primary-font primary-color four-digit right">15</td>
                        <td></td>
                    </tr>
                </table>
            </div>
            <div id="heading" class="tabs">
                <svg class="icon" viewBox="0 0 100 100">
                    <circle cx="50" cy="50" r="45" stroke-width="10" fill="none" class="primary-stroke" />
                    <g id="hdg_pointer">
                        <path
                            d="m50 50 l-10 0 l10 -28 l10 28z"
                            class="primary-fill"
                        />
                        <path
                            d="m40,50 l10,-28 l10,28 l-10,28z"
                            fill="none"
                            stroke-width="3"
                            class="primary-stroke"
                        />
                    </g>
                </svg>
                <table>
                    <tr id="hdg-row">
                        <td class="secondary-font secondary-color">HDG:&nbsp;</td>
                        <td id="hdg" class="primary-font primary-color three-digit right">225</td>
                        <td class="primary-font primary-color">&#176;</td>
                    </tr>
                    <tr id="trk-row">
                        <td class="secondary-font secondary-color">TRK:&nbsp;</td>
                        <td id="trk" class="primary-font primary-color three-digit right">225</td>
                        <td class="primary-font primary-color">&#176;</td>
                    </tr>
                </table>
            </div>
            <div id="altitude" class="tabs">
                <svg class="icon" viewBox="0 0 80 100">
                    <line x1="0" x2="80" y1="95" y2="95" stroke-width="5" class="secondary-stroke" />
                    <g transform="translate(0,-8) rotate(0,40,89)" id="airplane">
                        <path d="M10,94 H65 C73,94 73,84 65,84 H50 L30,64 L25,66 L35,84 H15 L12,79 H5" class="primary-fill" />
                        <g id="airplane-gear">
                            <circle cx="45" cy="97.5" r="2.5" class="primary-fill" />
                            <circle cx="39" cy="97.5" r="2.5" class="primary-fill" />
                        </g>
                    </g>
                </svg>
                <table>
                    <tr id="alt-row">
                        <td class="secondary-font secondary-color">ALT:&nbsp;</td>
                        <td id="alt" class="primary-font primary-color five-digit right">4900</td>
                        <td id="alt_unit" class="primary-font primary-color">ft</td>
                    </tr>
                    <tr id="vs-row">
                        <td class="secondary-font secondary-color">V/S:&nbsp;</td>
                        <td id="vs" class="primary-font primary-color five-digit right">1500</td>
                        <td class="primary-font primary-color">ft/min</td>
                    </tr>
                </table>
            </div>
            <div id="wind" class="tabs">
                <svg class="icon" viewBox="0 0 100 100">
                    <ellipse cx="90" cy="30" rx="5" ry="10" class="secondary-fill" />
                    <path d="m30,7 L90,20 L90,40 L30,53" class="secondary-fill" />
                    <ellipse cx="30" cy="30" rx="10" ry="23" class="primary-fill" />
                    <line x1="5" x2="30" y1="8" y2="10" stroke-width="3" class="secondary-stroke" />
                    <line x1="5" x2="30" y1="52" y2="50" stroke-width="3" class="secondary-stroke" />
                    <line x1="5" x2="5" y1="5" y2="95" stroke-width="5" class="primary-stroke" />
                </svg>
                <table>
                    <tr id="dir-row">
                        <td class="secondary-font secondary-color">DIR:&nbsp;</td>
                        <td id="wind_dir" class="primary-font primary-color three-digit right">43</td>
                        <td class="primary-font primary-color">&#176;</td>
                    </tr>
                    <tr id="mag-row">
                        <td class="secondary-font secondary-color">MAG:&nbsp;</td>
                        <td id="wind_mag" class="primary-font primary-color three-digit right">8</td>
                        <td class="primary-font primary-color">kt</td>
                    </tr>
                </table>
                </div>
                <div id="temperature" class="tabs">
                    <svg class="icon" viewBox="20 0 60 100">
                        <circle cx="50" cy="76" r="15" class="secondary-fill"/>
                        <line id="temperature-line" x1="50" x2="50" y1="62" y2="15" stroke-width="10" class="secondary-stroke" />
                        <path
                            d="M40,60 A 18 18 0 1 0 60,60 V20 A 10 10 0 1 0 40,20z"
                            fill="none"
                            stroke-width="10"
                            class="primary-stroke"
                        />
                    </svg>
                    <table>
                        <tr id="oat-row">
                            <td class="secondary-font secondary-color">OAT:&nbsp;</td>
                            <td id="oat" class="primary-font primary-color three-digit right">10</td>
                            <td class="primary-font primary-color">&#176;C</td>
                        </tr>
                        <tr id="tat-row">
                            <td class="secondary-font secondary-color">TAT:&nbsp;</td>
                            <td id="tat" class="primary-font primary-color three-digit right">15</td>
                            <td class="primary-font primary-color">&#176;C</td>
                        </tr>
                    </table>
                </div>
                <div id="performance" class="tabs">
                    <svg class="icon" viewBox="0 0 100 100">
                        <path d="M25,10 l50,0 l0,80 l-50,0z" fill="none" stroke-width="5" class="primary-stroke" />
                        <g id="feets">
                            <line id="feet" x1="23" x2="10" y1="25" y2="25" stroke-width="5" class="secondary-stroke" />
                            <use xlink:href="#feet" x="0" y="0" transform="translate(0, 10)" />
                            <use xlink:href="#feet" x="0" y="0" transform="translate(0, 20)" />
                            <use xlink:href="#feet" x="0" y="0" transform="translate(0, 30)" />
                            <use xlink:href="#feet" x="0" y="0" transform="translate(0, 40)" />
                            <use xlink:href="#feet" x="0" y="0" transform="translate(0, 50)" />
                        </g>
                        <use xlink:href="#feets" x="0" y="0" transform="translate(100) scale(-1,1)" />
                    </svg>
                    <table>
                        <tr id="fps-row">
                            <td class="secondary-font secondary-color">FPS:&nbsp;</td>
                            <td id="fps" class="primary-font primary-color three-digit right">60</td>
                            <td></td>
                        </tr>
                        <tr id="vas-row">
                            <td class="secondary-font secondary-color">VAS:&nbsp;</td>
                            <td id="vas" class="primary-font primary-color four-digit right">0</td>
                            <td class="primary-font primary-color">MB</td>
                        </tr>
                    </table>
                </div>
        </div>
        </div>
    </body>
</html>
